<template>
  <!-- 向公共组件传值 -->
  <CommonCardVue title="今日订单" :value="orderToday">
    <!-- 1. -->
    <div ref="chartRef" style="width:100%;height:100%"></div>

    <!-- 插入底部 -->
    <template v-slot:bottom>
      <span>昨日订单量</span>
      <span class="emphasis">{{ orderLastDay }}</span>
    </template>
  </CommonCardVue>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TodayOrders",
});
</script>

<script setup lang="ts">
import CommonCardVue from "./CommonCard.vue";
//引入store
import useDataStore from "@/stores/mock";
//引入计算属性
import { computed  , ref , onMounted , watch} from "vue";
import { $echarts } from '@/plugins/echerts';

//得到store对象
const dataStore = useDataStore();
//得到所需要的数据
const orderToday = computed(() => dataStore.mockData.orderToday as number);
const orderLastDay = computed(
  () => dataStore.mockData.orderLastDay as number
);
const orderTrend = computed(() => dataStore.mockData.orderTrend || []);
const orderTrendAxis = computed(() => dataStore.mockData.orderToday || []);

//拿到容器
const chartRef = ref()
let chart: any

const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留空白
      data: orderTrendAxis.value // x轴数据列表
    },
    yAxis: {
      show: false // 不显示y轴及标线
    },
    series: [
      {
        name: '实时订单数',
        type: 'line',
        // 列表数据
        data: orderTrend.value,
        // 线条光滑
        smooth: true,
        // 区域的样式
        areaStyle: {
          color: 'purple'
        },
        // 折线点的样式
        itemStyle: {
          opacity: 0
        },
        // 线的样式
        lineStyle: {
          opacity: 0
        }
      }
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true,
    }
  }
}

onMounted(() => {
  //把容器初始化到echarts
  chart = $echarts.init(chartRef.value)
  //配置项
  chart.setOption(getOption())
})

watch(orderToday, () => {
  chart.setOption(getOption())
})

</script>